<template>
  <div class="app-container" style="height: 100%">
    <div class="view-con">
      <div class="tree-con">
        <div class="title">
          <el-input
            v-model="filterText"
            placeholder="输入代理名称"
          />
        </div>
        <div class="treeList">
          <el-tree
            ref="tree"
            node-key="id"
            show-checkbox
            :default-expanded-keys="nameArray"
            :default-checked-keys="nameArray"
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @check-change="handleCheckChange"
            @node-click="handleNodeClick"
          />

        </div>
      </div>
      <div class="review-con">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column fixed label="代理" align="center" width="150">
            <template slot-scope="scope">
              {{ scope.row.agentId }}
            </template>
          </el-table-column>
          <el-table-column label="地区" align="center" width="250">
            <template slot-scope="scope">
              <span>{{ scope.row.provName }}-{{ scope.row.cityName }}-{{ scope.row.distName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电话" align="center" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.contactsTel }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.contactsMobile }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="企业类型" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.entTypeName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="企业规模" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.entScaleName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="年度" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.creatorId }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="填报时间" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="诊断时间" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="created_at" label="操作" width="110">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="primary" size="mini" @click="toReport(scope.row.userId, scope.row.creatorId, scope.row.cityCode)">查看报告</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          ref="paging"
          :current-page="currentPage"
          :total="total"
          :limit="limit"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getAllTree, getDownloadList } from '@/api/agent'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
export default {
  name: 'ViewReport',
  components: {
    Pagination
  },
  data() {
    return {
      filterText: '',
      idArray: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'agentName'
      },
      currentPage: 1,
      limit: 10,
      total: 0,
      nameArray: [],
      stateState: false,
      rpassword: false,
      countState: false,
      passState: false,
      addUrl: '/agent/agentAdd',
      list: null,
      listLoading: true,
      index: '',
      username: '',
      form1: {
        id: '',
        password: '',
        aPassword: ''
      },
      form2: {
        id: '',
        status: ''
      },
      rules2: {
        status: [
          { required: true, message: '请选启用或禁用', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  role: '',
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.loadGetAllTree()
  },
  methods: {
    cleckToGetDownloadList(id) {
      this.listLoading = true
      const a = []
      a[0] = id
      const c = JSON.stringify(a)
      getDownloadList({ agents: c }).then(response => {
        // console.log(response)
        this.total = response.data.total
        this.list = response.data.list
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        this.$message({
          message: '加载失败', type: 'warning'
        })
      })
    },
    cleckToGetDownloadList1(idArray) {
      this.listLoading = true
      const c = JSON.stringify(idArray)
      getDownloadList({ agents: c }).then(response => {
        // console.log(response)
        this.total = response.data.total
        this.list = response.data.list
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        this.$message({
          message: '加载失败', type: 'warning'
        })
      })
    },
    loadGetAllTree() {
      this.listLoading = true
      getAllTree({ cs: 1 }).then(response => {
        this.treeData = response.data
        if (response.data.length > 0) {
          this.nameArray[0] = this.treeData[0].id
          // console.log(this.treeData[0].id)
          this.handleNodeClick(this.treeData[0])
        }
        // this.handleCheckChange()
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        this.$message({
          message: '加载失败', type: 'warning'
        })
      })
    },
    updateData(id) {
      this.$router.push({ name: 'AgentUpdate', query: { id: id, currentPage: this.currentPage }})
    },
    showState(index) {
      this.index = index
      this.form2.status = this.list[this.index].status
      this.stateState = true
    },
    showRpassword(id) {
      this.form1.id = id
      this.rpassword = true
    },
    onClose1() {
      this.form1.id = ''
      this.form1.password = ''
      this.form1.aPassword = ''
    },
    showPass(index) {
      this.index = index
      this.passState = true
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadGetAllTree()
    },
    handleSizeChange(val) {
      this.limit = val
      this.currentPage = 1
      this.loadGetAllTree()
    },

    filterNode(value, data) {
      if (!value) return true
      return data.id.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      this.cleckToGetDownloadList(data.id)
      // console.log(data.id)
    },
    handleCheckChange(data, node, self) {
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      if (checkedKeys.length > 0) {
        this.cleckToGetDownloadList1(checkedKeys)
      } else {
        this.list = null
      }

      // console.log(checkedKeys)
      data.children
    },
    toReport(userId, year, cityCode) {
      // const routes = this.$router.resolve({ name: 'ReportPdf', query: { userId: userId, year: year, cityCode: cityCode }})
      // window.open(routes.href, '_blank')
      this.$router.push({ name: 'PdfAgent', query: { userId: userId, year: year, cityCode: cityCode }})
    }
  }
}
</script>
<style>
  .main-container{
    height: 100%;
  }
  .app-main{
    height: 90%;
  }
</style>
<style scoped>
.view-con{
  width: 100%;
  height: 100%;
  display: flex;
  border:1px #cccccc solid;
  min-height: 600px;
  overflow: hidden;
  position: relative;
}
  .view-con .tree-con{
    overflow: hidden;
    min-width: 300px;
    width: 20%;
    height: 100%;
    border-right: #cccccc 1px solid;
    min-height: 600px;
    overflow: hidden;
    position: relative;
  }
  .view-con .tree-con  .title{
    height: 60px;
    padding: 10px;
    border-bottom: #cccccc 1px solid;
    font-size: 30px;
  }
  .treeList{
    height: 100%;
    padding: 10px;
    overflow:auto;
    min-height: 600px;
  }
    .view-con .view-con{

  }
  .review-con{width: 80%;
  min-width: 600px}

</style>
